<template>
  <div id="echartContainer1"></div>
</template>

<script>

  export default {
    name: 'component1',
    props: {
      positionBySalary: {
        default: function () {
          return [0, 0, 0, 0, 0, 0, 0];
        }
      },
      companyBySize: {
        default: function () {
          return [0, 0, 0, 0, 0];
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '薪资和企业规模分布',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 0, 10]
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          borderColor: '#2599A0',
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['少于15人', '15-50人', '50-500人', '500-2000人', '2000人以上'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#2599A0'
                }
              },
              axisLine: {
                lineStyle: {color: '#2599A0'}  //x轴坐标轴颜色
              }
            },
            {
              type: 'category',
              boundaryGap: false,
              data: ['5K以下', '5-10K', '10-15K', '15-20K', '20-25K', '25-30K', '30K+'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#2599A0'
                }
              },
              axisLine: {
                lineStyle: {color: '#2599A0'}  //x轴坐标轴颜色
              },
              xAxisIndex: 1
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#2599A0'
                },
              },
              scale: true,
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#2599A0'],
                  width: 1,
                  type: 'dash'
                }
              },
              axisLine: {
                lineStyle: {color: '#2599A0'}  //y轴坐标轴颜色
              },
              splitNumber: 5

            }

          ],
          series: [
            {
              name: '职位总数',
              type: 'line',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#453473' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#030409' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
              },
              smooth: true,
              color: '#453473',
              data: [120, 132, 101, 134, 90],
              xAxisIndex: 0,
            },
            {
              name: '职位总数',
              type: 'line',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#2599A0' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#030409' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              smooth: true,
              color: '#2599A0',
              data: [220, 68, 89, 230, 290, 300, 310],
              xAxisIndex: 1
            }
          ],
          animationEasing: 'elasticOut',
          animationDelayUpdate: function (idx) {
            return idx * 5;
          }
        }

      };
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer1'));

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);
        //             myChart.hideLoading();
      }
    },
    watch: {
      positionBySalary: function () {

        let myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer1'));

        if (!this.positionBySalary[0]) {
          return false
        }
        console.info("PositionBySalary & CompanyBySize Changed");
        myChart.setOption({
          series: [{
            data: this.positionBySalary,
            xAxisIndex: 1
          },
            {
              data: this.companyBySize,
              xAxisIndex: 0
            }
          ]
        });
      },
      companyBySize: function () {
        let myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer1'));

        if (!this.companyBySize[0]) {
          return false
        }

        // myChart.setOption({
        //   series: [{
        //     data: this.companyBySize,
        //     xAxisIndex: 0
        //   }
        //   ]
        // });
      }
    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer1 {
    width: 100%;
    height: 100%;
  }
</style>
